<template>
<div id="useMsg">
      <!--后退-->
    <div style="height:7%;"><img class="back" src="../../../assets/task/back.png" alt="" onclick="history.go(-1)"></div>
    <div class="inAndOut" v-show="inandout">
       <p @click="myMesschoice('1')">系统通知</p>
       <p  @click="myMesschoice('2')">个人通知</p>
    </div>
    <div class="model" v-show="model" @click="disapper"></div>
    <!--筛选-->
    <div class="filter" @click="filter">
        <span >筛选</span>
        <img src="../../../assets/me/goTO.png" alt="">
    </div>
    <div v-infinite-scroll="loadMore"
         infinite-scroll-disabled="moreLoading" infinite-scroll-distance="0"
         infinite-scroll-immediate-check="false" class="cardList">
        <section v-for="item in allMyMess">
            <img style="border-radius:50%;width:2.5rem;height:2.5rem;margin-right:0.5rem;" :src="myUserData.headPortrait" alt="">
            <div class="cardDD">
                <div><p>{{turnmessType(item.messageType)}} :</p><p>{{item.messageTitle}}</p><p style="color:#888888;font-size:0.65rem;margin-top:0.25rem;text-align:right;width:100%">{{turnTime(item.createTime)}}</p></div>
            </div>
        </section>
      <div style="text-align: center;line-height: 2rem">已经没有更多数据了</div>
    </div>

</div>
</template>
<script>
import turnmessType from '../../../server/myMessage.js'
import turnTime from '../../../server/dataTime.js'
export default {
  data () {
    return {
        forms:{
            messageType:undefined,
            pageSize: 10,
          pageNumber: 1
        },
        countData:{},
        turnTime:turnTime,
        inandout:false,
        model:false,
        turnmessType:turnmessType,
        allMyMess:[],
        myUserData:'',
        moreLoading: false,
        loading: false
    }
  },
  created(){
      this.getAllMineMess()
      this.getCurrentUser()
  },
  watch: {
    mesType(val){
      if(val){
        this.allMyMess = []
      }
    }
  },
  computed:{
    mesType(){
      return this.forms.messageType
    }
  },
  methods:{
      //  获取当前用户的信息
      getCurrentUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                  this.myUserData = res.data
                  console.log(res.data)
              }
          })
      },
    loadMore(){
       this.forms.pageNumber++
      this.getAllMineMess()
    },
    //   通知筛选筛选
    myMesschoice(val){
        this.inandout = false;
        this.model = false;
        if(val==1){
            this.forms.messageType = 1;
        }else{
            this.forms.messageType = 2;
        }
        this.getAllMineMess()
    },
      disapper(){
           this.inandout = false;
           this.model = false;
      },
      filter(){
          this.inandout = !this.inandout;
           this.model = !this.model;
      },
      // 获取全部消息
      getAllMineMess(){
        this.loading  =true
          this.$api.getAllMineMess(this.forms).then((res)=>{
              if(res.code=='000000'){
                this.loading = false
                if (this.forms.pageNumber === res.data.totalPage){
                  this.moreLoading = true
                } else {
                  this.moreLoading = false
                }
                //    this.forms.bpType = allMyMess;

                res.data.list.forEach(item => {
                  this.allMyMess.push(item)
                })
              }
          })
      }
  }
}
</script>
<style>
#useMsg .cardDD{
    width:85%;
    height:100%;
    display:flex;
    justify-content: space-between;
    padding-bottom:0.25rem;
    border-bottom: 0.5px solid #badcbe;
}
#useMsg .cardList{


    background-color:white;
    padding:0.3rem 1rem 0 1.5rem;

  position: absolute;
  top: 6.5rem;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow-y: auto;
}
#useMsg .cardList section{
    display:flex;
    padding:0.25rem;
}
#useMsg .quota{
    height:2.5rem;
    line-height:1.5rem;
    padding:0 2rem;
    font-size:1rem;
    margin:1rem 0 0rem 0;
}
#useMsg .quota > p{
    width:50%;
    display:flex;
    color:#888888;
    justify-content:space-between;
}
#useMsg .inAndOut{
    width:100%;
    height:5rem;
    background-color:white;
    position:absolute;
    top:14%;
    left:0;
    z-index:1111;
}
#useMsg .inAndOut p{
    padding-left:1.5rem;
    height:1.5rem;
    line-height:1.5rem;
}

#useMsg {
    width:100%;
    height:100%;
    background-color:rgb(248, 248, 248)
}
#useMsg .model{
    position:absolute;
    top:14%;
    left:0;
    height:86%;
    width:100%;
    background-color: #000;
    opacity: 0.5;
    z-index:11;
}
 #useMsg  .back{
    height:1.1rem;
    width:0.6rem;
    margin:1rem 1rem 0rem 1rem;
  }
 #useMsg  .filter{
      width:100%;
      background-color:white;
      height:7%;
      line-height:2.5rem;
      padding:0 2rem;
      margin-bottom:1.5rem;
      box-shadow:0.05rem 0.05rem 0.8rem 0.05rem #e2e2e2;
      color:#888888;
  }
  #useMsg .filter img{
        height:1.1rem;
        width:0.6rem;
        transform:rotate(90deg);
        margin:0 1rem 0 0.75rem;
  }
</style>
